<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../libs/js/vue.js"></script>
    <script src="../libs/js/vue-router.js"></script>  
    <title>Document</title>
    <style>
        .box{
            width:80%;
            height:400px;
            border-radius: 10px;
            border:1px solid darkorange;
        }
        .router-link-exact-active, .router-link-active{
            background: darkred;
            color:#fff;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2> {{msg }}</h2>
        
        <my-head></my-head>
        <!-- 6. 声明式导航   a 链接跳转  -->
        <a href="#/home" > 首页</a>
        <router-link to="/home" >首页1</router-link>
        <router-link to="/find" >朋友圈</router-link>
        <router-link to="/news" >新闻</router-link>
        <router-link to="/mine" >我的</router-link>
        <hr>
        <!-- 5.路由出口 接收当前激活的组件 显示组件  -->
        <div class="box">
            <router-view></router-view>
        </div>
    </div>

    <template id="head">
        <header>
            <h2>Head- wh2107-daydayup</h2>
        </header>
    </template>
    <template id="home">
        <div>
            <h2>Home - Home - 主页</h2>
        </div>
    </template>
    <template id="mine">
        <div>
            <h2>Mine - Mine - 个人中心</h2>
        </div>
    </template>
    <template id="find">
        <div>
            <h2>Find - Find - 朋友圈</h2>
        </div>
    </template>
    <template id="news">
        <div>
            <h2>news - news - 今日热点新闻</h2>
        </div>
    </template>
    <template id="notfound">
        <div>
            <h2>notfound - notfound - 未找到</h2>
        </div>
    </template>
    <script>
        const Head = {
            template:"#head"
        }
        Vue.component("my-head",Head)
        // 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)  Vue脚手架

        // 1. 定义(路由组件)
        const Home = {
            template:"#home"
        }
        const Mine = {
            template:"#mine"
        }
        const Find = {
            template:"#find"
        }
        const News = Vue.extend({
            template:"#news"
        })

        const NotFound = {
            template:"#notfound"
        }
        // 2.定义路由配置  
        // 定义好组件和路径之间的一一映射  component  path 
        const routes = [
            {path:"/home",component:Home},
            {path:"/find",component:Find},
            {path:"/news",component:News},
            {path:"/mine",component:Mine},
            {path:"/404",component:NotFound},
            {
                path:"*",    
                component:NotFound
            }
        ]

        // 3.创建路由对象 VueRouter 
        const router = new VueRouter({
            routes:routes 
        })

        // 4.挂载到根实例
        const vm = new Vue({
            router:router,  // this.$router 获取路由对象  
            el:"#app",
            data:{
                msg:"路由基础 "
            },
            watch:{
                '$route':function(to,from){   // 监听路由切换
                    console.log(to)    // 进入的新路由
                    console.log(from)  // 离开的旧路由 
                }
            },
            mounted(){
                document.querySelectorAll("title")[0].innerHTML = this.msg;
                console.log(this.$router)    // 路由对象  负责路由切换 重定向
                console.log(this.$route)     // 路由信息对象  记录当前路由的相关数据信息  (参数 params query meta )
            }
        })
    </script>

      <!-- 
        node 路由 根据不同的url接口 返回对应的不同的数据或者页面  
        Vue 路由 router 根据不同的url路径 pathname  匹配路由里面的 path 匹配成功就加载对应的组件(component)
        
        Vue Router 是 Vue.js 官方的路由管理器。
        它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌
        
        路由作用 实现构建单页面应用  index.html 其他页面 组件形式加载
        single-page-appliaction     (SPA)

        将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们

        a. 掌握 配置最基本的路由 流程
        b. 路由传递参数  动态路由
        c. 嵌套路由
     -->
</body>
</html>